<template>
  <div class="headerow-index-wrapper" v-bind="$attrs">
    <img :src="head" />
    <van-row>
      <p>{{ nickName }}</p>
      <p>{{ birthday | toConvertDate }}</p>
    </van-row>
    <p v-if="isShowBtn" @click="onClk">
      <i>{{ btnText }}</i>
    </p>
  </div>
</template>
<script>
import * as UTILS from '@/utils/index'

export default {
  props: {
    baby: {
      type: Object,
      default: () => {},
      requierd: true,
    },
    btnText: {
      type: String,
      default: '重新测评',
    },
    isShowBtn: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {}
  },
  computed: {
    head() {
      if (!this.baby) return ''
      return this.baby.head
    },
    nickName() {
      if (!this.baby) return ''
      return this.baby.nickName
    },
    birthday() {
      if (!this.baby) return ''
      return this.baby.birthday
    },
    textStyle() {
      return this.isShowBtn
        ? ''
        : {
            color: 'rgba(0, 0, 0, 0.8)',
          }
    },
  },
  mounted() {},
  filters: {
    toConvertDate(v) {
      if (!v) return ''
      const toNumBirthday = UTILS.getGrowAge(v)
      const { year, month } = toNumBirthday
      return `${year}岁${month * 1}个月`
    },
  },
  watch: {},
  methods: {
    onClk() {
      this.$emit('clkBtn')
    },
  },
}
</script>

<style lang="less" scoped>
.headerow-index-wrapper {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  // background-color: #00ffff;

  & > img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: solid 1px #ffa4a4;
  }

  & > div:first-of-type {
    margin-left: 16px;
    height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > p {
      margin: 0;
    }
    & > p:first-of-type {
      margin-top: 9px;
      line-height: 17px;
      font-family: 'SourceHanSansCN-Medium';
      font-size: 17px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 0.8);
      // color: #ffffff;
    }
    & > p:nth-of-type(2) {
      margin-top: 8px;
      line-height: 12px;
      font-family: 'SourceHanSansCN-Regular';
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 0.8);
      border-bottom: 8px solid transparent;
      // color: #ffffff;
    }
  }

  & > p {
    margin: 0;
    margin-left: auto;
    width: 83px;
    height: 29px;
    border-radius: 15px;
    // border: solid 1px #ffffff;
    border: solid 1px #ff6666;
    display: flex;
    align-items: center;
    justify-content: center;
    & > i {
      font-style: normal;
      line-height: 13px;
      font-family: 'SourceHanSansCN-Medium';
      font-size: 13px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      // color: #ffffff;
      color: #ff6666;
    }
  }

  // min-height: 100%;
}
</style>
